<template>
  <umrp-container padding="40px" :gap="24">
    <umrp-text :size="16" bold>会员中心</umrp-text>
    <umrp-grid :cols="5" :col-gap="10">
      <umrp-grid-item>
        <umrp-container bg-color="#f2f2f2" padding="24px" align="center" :gap="10">
          <umrp-text>一年</umrp-text>
          <umrp-text-price>19.99</umrp-text-price>
          <umrp-text>学生会员</umrp-text>
        </umrp-container>
      </umrp-grid-item>
      <umrp-grid-item>
        <umrp-container bg-color="#f2f2f2" padding="24px" align="center" :gap="10">
          <umrp-text>一年</umrp-text>
          <umrp-text-price>19.99</umrp-text-price>
          <umrp-text>学生会员</umrp-text>
        </umrp-container>
      </umrp-grid-item>
      <umrp-grid-item>
        <umrp-container bg-color="#f2f2f2" padding="24px" align="center" :gap="10">
          <umrp-text>一年</umrp-text>
          <umrp-text-price>19.99</umrp-text-price>
          <umrp-text>学生会员</umrp-text>
        </umrp-container>
      </umrp-grid-item>
      <umrp-grid-item>
        <umrp-container bg-color="#f2f2f2" padding="24px" align="center" :gap="10">
          <umrp-text>一年</umrp-text>
          <umrp-text-price>19.99</umrp-text-price>
          <umrp-text>学生会员</umrp-text>
        </umrp-container>
      </umrp-grid-item>
      <umrp-grid-item>
        <umrp-container bg-color="#f2f2f2" padding="24px" align="center" :gap="10">
          <umrp-text>一年</umrp-text>
          <umrp-text-price>19.99</umrp-text-price>
          <umrp-text>学生会员</umrp-text>
        </umrp-container>
      </umrp-grid-item>
    </umrp-grid>
    <umrp-text :size="16" bold>会员权益</umrp-text>
    <umrp-grid :cols="5" :row-gap="24" :col-gap="24">
      <umrp-grid-item v-for="_ in 8">
        <umrp-media>
          <template #cover>
            <umrp-image :width="60" :height="60"></umrp-image>
          </template>
          <umrp-container :gap="10" padding="10px 0">
            <umrp-text>优享极速下载</umrp-text>
            <umrp-text color="secondary">优先速度保障</umrp-text>
          </umrp-container>
        </umrp-media>
      </umrp-grid-item>
    </umrp-grid>
  </umrp-container>
</template>
